<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>角色信息列表</title>
<script type="text/javascript" th:src="@{/js/userConfig/job.js}"></script>
<style>
	.el-transfer {padding-left: 70px !important;}
</style>
</head>
<body>
	 <div id="pageDiv">
	 
	 	<div>
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>系统管理</el-breadcrumb-item>
			  <el-breadcrumb-item>作业管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br/>
		<!-- 新增角色 -->
		<div>
			<template>
				<el-dialog title="新增作业" :visible.sync="dialogAdd" width="30%">
				    <el-form :inline="false" :model="jobAdd" ref="jobAdd" label-position="right" size="small" :rules="rules">
						  <el-form-item label="作业编码" prop="jobCode">
						  	<el-col :span="18">
						    	<el-input v-model="jobAdd.jobCode" placeholder="作业编码"></el-input>
						    </el-col>
						  </el-form-item>
						  <el-form-item label="作业描述" prop="jobDesc">
						  	<el-col :span="18">
						       <el-input v-model="jobAdd.jobDesc" placeholder="作业描述"></el-input>
						     </el-col>
						  </el-form-item>
						  <el-form-item label="作业内容" prop="jobContent">
						  	<el-col :span="18">
						       <el-input v-model="jobAdd.jobContent" placeholder="作业内容"></el-input>
						     </el-col>
						  </el-form-item>
					</el-form> 
					<span slot="footer" class="dialog-footer">
					    <el-button size="mini" type="primary" @click="addForm('jobAdd')">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</span>
				</el-dialog>
				<el-button size="small" type="primary" @click="openAddDialog()">新增作业</el-button>
			</template>
		</div>
		<!-- 新增角色 -->
		
		<br/>
		
		<!-- 作业配置列表 -->
		<div>
			<template>
				<!-- 表格 -->
				<el-table  v-loading="loading" :data="tableData" height="410"  style="width: 100%">
				    <el-table-column prop="jobCode" label="作业编码" width="350"></el-table-column>
				    <el-table-column prop="jobDesc" label="作业描述" width="350"></el-table-column>
				    <el-table-column prop="jobContent" label="作业内容" width="200"></el-table-column>
				    <el-table-column label="操作">
				      <template slot-scope="scope">
						<el-button size="mini" type="primary" plain @click="getRoleData(scope.row)">修改</el-button>
				        <el-button size="mini" type="danger" plain @click.native.prevent="deleteConfig(scope.$index, scope.row,tableData)"> 删除</el-button> 
				      </template>
				    </el-table-column>
				</el-table>
				<!-- 分页 -->
		    	<el-pagination 
		    		background
		    		@size-change="handleSizeChange" 
		    		@current-change="handleCurrentChange" 
		    		:current-page="currentPage"  
		    		:page-sizes="[3,5,10]" 
		    		:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" 
		    		:total="totalSize">
    			</el-pagination>
    			<!-- 使用dialog方式 -->
				<el-dialog title="修改作业" :visible.sync="dialogEdit"  width="30%">
				    <el-form :inline="false" :model="job" label-position="right" size="small">
						  <el-form-item label="作业编码">
						 	 <el-col :span="18">
						   		 <el-input v-model="job.jobCode" placeholder="作业编码"></el-input>
						   	 </el-col>
						  </el-form-item>
						  <el-form-item label="作业描述">
						  	  <el-col :span="18">
						    	  <el-input v-model="job.jobDesc" placeholder="作业描述"></el-input>
						      </el-col>
						  </el-form-item>
						  <el-form-item label="作业内容">
						  	  <el-col :span="18">
						    	  <el-input v-model="job.jobContent" placeholder="作业内容"></el-input>
						      </el-col>
						  </el-form-item>
					</el-form> 
					<div style="text-align: right; margin: 0">
					    <el-button size="mini" type="primary" @click="editForm()">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</div>
				</el-dialog>
				
			</template>
		</div>
		<!-- 作业列表 -->
		
	</div>
</body>
</html>